<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="时间" prop="date">
        <el-date-picker v-model="dateRange" type="daterange" unlink-panels value-format="YYYY-MM-DD" format="YYYY-MM-DD"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"
          @change="changeDate" />
      </el-form-item>
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入订单号" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="queryParams.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="shopName">
        <el-input v-model="queryParams.shopName" placeholder="请输入店铺名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="userList">
      <el-table-column label="订单编号" align="center" prop="订单号" :show-overflow-tooltip="true" />
      <el-table-column label="包装套餐" align="center" prop="包装套餐" :show-overflow-tooltip="true" />
      <el-table-column label="用户名称" align="center" prop="用户名称" :show-overflow-tooltip="true" />
      <el-table-column label="充值号码" align="center" prop="充值号码" :show-overflow-tooltip="true" />
      <el-table-column label="充值总金额" align="center" prop="充值总金额" :show-overflow-tooltip="true" />
      <el-table-column label="达成充值金额" align="center" prop="达成充值金额" width="120" />
      <el-table-column label="链接领取金额" align="center" prop="链接领取金额" width="120" />
      <el-table-column label="线下领取金额" align="center" key="var2" prop="线下领取金额" width="120"
        :show-overflow-tooltip="true" />
      <el-table-column v-for="item in headerList" :key="item" :label="item" align="center" :prop="item" width="120" />
    </el-table>
  </div>
</template>

<script setup name="User">
import { listEffect } from "@/api/phoneBill/statistic";
import { shortcuts, Y, M, D } from '@/utils/dateSet'
import { parseTime } from "@/utils/ruoyi.js";
const { proxy } = getCurrentInstance();
const userList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const dateRange = ref([parseTime(new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 7),
parseTime(new Date(Y.value, M.value, D.value, 23, 59, 59).getTime())])
const data = reactive({
  form: {},
  queryParams: {
    orderNo: undefined,
    shopName: undefined,
    phone: undefined,

  },
});

const { queryParams } = toRefs(data);
const headerList = ref([])
/** 查询用户列表 */
function getList() {
  loading.value = true;
  listEffect(proxy.addDateRange({ ...queryParams.value, start: dateRange.value[0], end: dateRange.value[1] })).then(
    (res) => {
      loading.value = false;
      userList.value = res.data.list;
      headerList.value = res.data.total
    }
  );
}

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [parseTime(new Date(Y.value, M.value, D.value, 0, 0, 0).getTime() - 3600 * 1000 * 24 * 7),
  parseTime(new Date(Y.value, M.value, D.value, 23, 59, 59).getTime())]
  proxy.resetForm("queryRef");
  queryParams.value.deptId = undefined;
  handleQuery();
}
const changeDate = (val) => {
  if (!val) {
    dateRange.value = []
  } else {
    queryParams.value.start = dateRange.value[0];
    queryParams.value.end = dateRange.value[1];
  }

};
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "/receiveDetail/downs",
    {
      ...queryParams.value,
    },
    `话费领取统计${new Date().getTime()}.xlsx`
  );
}
getList();
</script>
